<template>
	<div>
		<div>
			<el-row>
				<el-col :span="12">
					<div class="grid-content"></div>
				</el-col>
				<el-col :span="12">
					<div>
						<el-input placeholder="请输入内容" v-model="inputfid" class="input-with-select">
							<el-select v-model="select" slot="prepend" placeholder="请选择">
								<el-option label="货运单编号" value="1"></el-option>
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="findByFid()"></el-button>
						</el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div>
			<el-table :data="tableData" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}" :height="tableMaxHeight">
				<el-table-column fixed prop="fid" label="货运单编号" width="300">
				</el-table-column>
				<el-table-column prop="customerInformations.name" label="发货客户" width="120">
				</el-table-column>
				<el-table-column prop="customerIns.name" label="收货客户" width="120">
				</el-table-column>
				<el-table-column prop="freightContracts.refundtype" label="业务类型" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.freightContracts.refundtype == 1">即日退</span>
						<span v-if="scope.row.freightContracts.refundtype == 2">三日退</span>
					</template>
				</el-table-column>
				<el-table-column prop="freightContracts.payment" label="应收货款(元)" width="120">
				</el-table-column>
				<el-table-column prop="afterReceivables" label="变更后金额(元)" width="120">
				</el-table-column>
				<el-table-column prop="commissionRate" label="佣金率(%)" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.freightContracts.refundtype == 1">0.01</span>
						<span v-if="scope.row.freightContracts.refundtype == 2">0.02</span>
					</template>
				</el-table-column>
				<el-table-column prop=".freightContracts.freightStatus.status" label="运单状态" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.freightContracts.freightStatus.status == 0">待发货</span>
						<span v-if="scope.row.freightContracts.freightStatus.status == 1">运输中</span>
						<span v-if="scope.row.freightContracts.freightStatus.status == 2">中转中</span>
						<span v-if="scope.row.freightContracts.freightStatus.status == 3">已到货</span>
						<span v-if="scope.row.freightContracts.freightStatus.status == 4">提货中</span>
						<span v-if="scope.row.freightContracts.freightStatus.status == 5">已提货</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="small" plain @click="handleEdit(scope.$index, scope.row)">业务变更</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-dialog title="业务变更" :visible.sync="dialogFormVisible">
				<el-row>
					<el-col :span="24">
						<el-form :model="updateform">
							<el-row>
								<el-col :span="12">
									<el-form-item label="货运单编号" :label-width="formLabelWidth">
										<el-input v-model="updateform.fid" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="发货客户" :label-width="formLabelWidth">
										<el-input v-model="updateform.customerInformations.name" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12">
									<el-form-item label="应收货款(元)" :label-width="formLabelWidth">
										<el-input v-model="updateform.freightContracts.payment" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="货款变更(元)" :label-width="formLabelWidth" required>
										<el-input v-model="updateform.afterReceivables" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8">
									<el-form-item label="修改业务类型" :label-width="formLabelWidth" required>
										<el-select v-model="updateform.freightContracts.refundtype" placeholder="请选择业务">
											<el-option label="即日退" value="1"></el-option>
											<el-option label="三日退" value="2"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-col>
				</el-row>
				<div slot="footer" class="dialog-footer" style="text-align: center;">
					<el-button type="primary" @click="update()">保存</el-button>
					<el-button  @click="isupdate()">取消</el-button>
				</div>
			</el-dialog>
		</div>
		<div style="text-align: right;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum" :page-sizes="[5,10]" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputfid: '',
				select: '',
				tableData: [],
				dialogFormVisible: false,
				updateform: {
					fid: '',
					freightContracts: '',
					customerInformations: '',
					receivables:'',
					afterReceivables:'',
				},
				formLabelWidth: '120px',
				currentPage: 1,
				pageSize:5,
				pageInfo:[]
			}
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			//结算
			handleEdit(index, row) {
				console.log(index, row);
				this.dialogFormVisible = true;
				this.updateform = {
					...row
				};
			
			},
			getList(){
				//发送ajax
				this.axios.get("http://localhost:8080/changesBusiness/"+this.currentPage+"/"+this.pageSize).then(res =>{
					console.log(res.data.data);
					//this.pageInfo = res.data.data;
					let tData = [];
					let j = 0;
					for(let i = 0;i<res.data.data.list.length;i++){
						if(res.data.data.list[i].freightContracts.freightStatus.isCollection != 0){
							tData[j] = res.data.data.list[i]
							j++;
						}
					}
					
					this.tableData = tData;
					this.pageInfo.total = tData.length;
				})
			},
			//业务变更
			update() {
				//发送ajax
				this.axios.put("http://localhost:8080/changesBusiness/after", {
					"id": this.updateform.id,
					"afterReceivables": this.updateform.afterReceivables,
					"businessType":this.updateform.freightContracts.refundtype
				}).then(
					res => {
						//this.updateform = {};
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.dialogFormVisible = false;
						this.getList();
					})
			},
			update() {
				//发送ajax
				this.axios.put("http://localhost:8080/changesBusiness/re", {
					"id": this.updateform.fid,
					"refundtype":this.updateform.freightContracts.refundtype
				}).then(
					res => {
						//this.updateform = {};
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.dialogFormVisible = false;
						this.getList();
					})
			},
			isupdate() {
				this.$message({
					message: '单条业务变更失败',
					type: 'warning'
				});
				this.dialogFormVisible = false;
			},
			//搜索功能
			findByFid() {
				//发送ajax
				this.axios.get("http://localhost:8080/collectionsettle/" + this.inputfid).then(
					res => {
						//console.log(res.data.data);
						this.tableData = [];
						var re = [];
						//console.log(res.data.data.isPayment);
			
						if (res.data.data.freightContracts.freightStatus.isCollection != 0) {
							re.push(res.data.data);
							this.tableData = re;
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.pageInfo.total = 1;
						}else{
							this.$message({
								message: '没有该订单',
								type: 'warning'
							});
							this.pageInfo.total = 0;
						}
						
						//console.log(this.tabledata);
					})
			}
		},
		computed: {
			tableMaxHeight() {
				return window.innerHeight - 170 + 'px';
			}
		},
		//初始化列表
		created() {
			this.getList();
		}
	}
</script>

<style>
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
